@import url(../globalCssVariable.scss);

.ty-button-wrapper {
  /* Default */
  .ty-button {
    border: none;
    transition: 0.3s;
    height: 32px;
    // line-height: ;
    cursor: pointer;
    text-align: center;
    position: relative;
    padding: 0 15px;
    font-family: 'SYHT-R';
    font-size: 14px;
    background-color: var(--color-default-bg);
    color: var(--color-default-font);
    border-radius: var(--border-radius-small);
  }

  .ty-button:hover {
    background-color: var(--color-default-bg-hover);
  }

  .ty-button:active {
    background-color: var(--color-default-bg-active);
  }

  /* Primary */
  .ty-button-primary {
    color: var(--color-primary-font);
    background-color: var(--color-primary-bg);
  }

  .ty-button-primary:hover {
    background-color: var(--color-primary-bg-hover);
  }

  .ty-button-primary:active {
    background-color: var(--color-primary-bg-active);
  }
}

